Component Playground

Decision Summary#

The decision summary component provides an executive-friendly snapshot of the inputs, outputs, and pitfalls for a talent operations decision.

This page is your one-stop QA surface for every content component in the documentation system. If it renders cleanly here, it renders cleanly everywhere. Each section below exercises one or more component with realistic talent-operations content so you can verify styling, interactivity, and accessibility in context.

Treat this as a living test harness. When you add a new component, add a section here first, verify it works, then use it in production pages.

Terminology#

Every organisation has jargon. The glossary tooltip system lets authors mark terms inline so readers get definitions without leaving the page. Hover or tap any dotted-underlined term below.

In a typical talent operations cycle the COO monitors utilization to ensure the bench stays lean, while the recruitment lead evaluates sellability of incoming candidates. Finance tracks pipeline confidence to set hiring budgets. Meanwhile, the competency team audits skill coverage to identify capability gaps, and HR watches time-to-billable as a proxy for onboarding effectiveness. Every staffing request includes a role context payload so the system can match beyond job title. The weekly review compares the capacity delta to the threshold that triggers a hire-or-wait decision.

Key terms that frequently appear together:

• Utilization and bench are inversely related -- high bench drives low utilization.
• Pipeline confidence feeds directly into the risk-weighted demand calculation.
• Time-to-billable is the hidden cost that makes capacity delta harder to close quickly.

See the full list on the Glossary page.

Tabs#

Tabs let you present role-specific or scenario-specific content without overwhelming the reader. Each tab set supports keyboard navigation and optional localStorage persistence.

Stakeholder views#

Scenario complexity#

Callouts and Collapsible Sections#

Four callout variants for different semantic purposes, followed by collapsible detail blocks.

Formula Blocks#

Formulas use the FormulaCard component for centered display with copy-to-clipboard, collapsible assumptions, and worked examples.

Data Table#

The sortable DataTable component handles tabular data with click-to-sort column headers, zebra striping, and mobile horizontal scroll.

Stat Grid#

The StatGrid displays key metrics in a responsive card layout with optional trend indicators.

Figures#

The Figure component wraps visual content with a semantic figcaption, numbered label, and optional download button.

Mermaid Diagram#

Decision flow rendered via the MermaidDiagram component. Includes copy-source and view-source actions.

Code Blocks#

Two code blocks with syntax highlighting and copy buttons -- one pseudocode, one JSON payload.

// Pipeline-Adjusted Demand Calculator
function calculateAdjustedDemand(deals) {
  return deals
    .filter(deal => deal.winProbability >= 0.10)
    .reduce((total, deal) => {
      const weighted = deal.hours * deal.winProbability;
      console.log(`${deal.name}: ${deal.hours}h × ${deal.winProbability} = ${weighted}h`);
      return total + weighted;
    }, 0);
}

const pipeline = [
  { name: "Acme Cloud Migration",  hours: 200, winProbability: 0.80 },
  { name: "Beta Data Platform",    hours: 300, winProbability: 0.50 },
  { name: "Gamma Advisory Review", hours: 100, winProbability: 0.20 },
];

const adjustedDemand = calculateAdjustedDemand(pipeline);
// => 330 weighted hours

{
  "id": "rc-0042",
  "role": "Senior Cloud Architect",
  "industry": "Financial Services",
  "seniority": "Principal",
  "location": "London / Remote",
  "skills": ["AWS", "Terraform", "Kubernetes", "FinOps"],
  "certifications": ["AWS Solutions Architect Pro"],
  "clearance": "SC cleared",
  "constraints": {
    "maxTravel": "20%",
    "startAfter": "2026-03-01",
    "minEngagementWeeks": 12
  }
}

Navigation and Metadata#

This page renders with status: draft and lastUpdated: 2026-02-10 in the frontmatter. You should see both the status badge and the date in the meta row below the title. The sidebar should list this page under Tools > Reference, and the previous/next links at the bottom should navigate to adjacent pages in the Tools area.

QA checklist#

Use this list to verify that all interactive features are working:

• Table of Contents on the right shows all H2 sections
• Copy buttons work on both code blocks and formula cards
• All three tabs switch in the stakeholder view; both tabs switch in the scenario view
• Glossary Term tooltips open on hover and show definitions
• Data table scrolls horizontally on mobile and columns sort on click
• Callout variants display distinct colours and icons
• Collapsed sections expand and collapse
• Mermaid diagram renders and the "View source" toggle works
• Stat grid cards display trend arrows correctly
• Figure captions show numbered labels
• Previous/Next navigation links appear at the bottom