Use Cases Scenario Walkthrough

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface ScenarioStep {
  actor: string
  action: string
  recorded: string
}

Files installed (2)

• src/app/components/blocks/use-cases-scenario-walkthrough/use-cases-scenario-walkthrough.component.ts4.7 kB

  Copy

  // One concrete scenario walked end to end as a numbered sequence of what happens,
  // who does it, and what the system records at each step. Port of the React block
  // 1:1 (static, no client state).
  import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
  import { ArrowRight, LucideAngularModule } from 'lucide-angular'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  interface ScenarioStep {
    actor: string
    action: string
    recorded: string
  }
  
  const steps: ScenarioStep[] = [
    {
      actor: 'Controller',
      action: 'Notices Q1 revenue in the board deck is £41k above the close pack.',
      recorded: 'Nothing yet — this is the part that used to take a day to explain.',
    },
    {
      actor: 'Controller',
      action: 'Opens the metric and reads its history instead of asking the analytics team.',
      recorded: 'Definition v127, changed 14 Feb by finance-analytics, reviewed by A. Reyes.',
    },
    {
      actor: 'Analyst',
      action: 'Sees the deck was built on v126, before the trailing window changed.',
      recorded: 'Consumer list shows which dashboards still resolve the older version.',
    },
    {
      actor: 'Analyst',
      action: 'Republishes the deck against the current definition; the gap disappears.',
      recorded: 'Publish event, with the before and after figures attached.',
    },
    {
      actor: 'Auditor',
      action: 'Six months later, asks why Q1 was restated.',
      recorded: 'The whole chain above, exported as a single PDF in under a minute.',
    },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-use-cases-scenario-walkthrough, [ui-use-cases-scenario-walkthrough]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [
      LucideAngularModule,
      UiBadgeComponent,
      UiButtonComponent,
      UiCardComponent,
      UiCardContentComponent,
      UiSeparatorComponent,
    ],
    template: `
      <section data-slot="use-cases-scenario-walkthrough" [class]="rootClass">
        <div class="mx-auto max-w-4xl px-6 py-20 lg:py-28">
          <div class="max-w-2xl">
            <span ui-badge variant="secondary">A Tuesday</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Two numbers disagree. Here is the whole sequence.
            </h2>
            <p class="text-muted-foreground mt-3 text-lg">
              Not a feature list — the actual path, including what the system writes down at each step.
            </p>
          </div>
  
          <ol class="mt-12 space-y-4">
            @for (step of steps; track step.action; let i = $index) {
              <li class="grid grid-cols-[auto_1fr] gap-x-5">
                <div class="flex flex-col items-center">
                  <span
                    class="border-border bg-card text-muted-foreground relative z-10 flex size-9 shrink-0 items-center justify-center rounded-full border font-mono text-xs font-semibold"
                  >
                    {{ (i + 1).toString().padStart(2, '0') }}
                  </span>
                  @if (i < steps.length - 1) {
                    <span class="bg-border w-px grow" aria-hidden="true"></span>
                  }
                </div>
  
                <div ui-card class="mb-4">
                  <div ui-card-content class="p-5">
                    <span ui-badge variant="outline">{{ step.actor }}</span>
                    <p class="mt-3 text-sm leading-relaxed">{{ step.action }}</p>
                    <ui-separator class="my-3" />
                    <p class="text-muted-foreground text-xs leading-relaxed">
                      <span class="font-medium">Recorded: </span>{{ step.recorded }}
                    </p>
                  </div>
                </div>
              </li>
            }
          </ol>
  
          <div class="border-border mt-6 flex flex-wrap items-center justify-between gap-4 border-t pt-6">
            <p class="text-muted-foreground text-sm">Total elapsed, start to resolution: about nine minutes.</p>
            <button ui-button>
              Walk through it yourself
              <lucide-icon [img]="ArrowRight" class="ml-2 size-4" />
            </button>
          </div>
        </div>
      </section>
    `,
  })
  export class UiUseCasesScenarioWalkthroughComponent {
    protected readonly ArrowRight = ArrowRight
    protected readonly steps = steps
  
    @Input('class') className?: string
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  }
  

• src/app/components/blocks/use-cases-scenario-walkthrough/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/use-cases-scenario-walkthrough.json