WAfM components

Analysis detail panel

Compose an analysis introduction, knowledge action, and explanation of the selected dimension.

Analysis detail panel playground

Change the title and composed content to inspect long labels, missing results, and optional sections.

Properties

Dimension title

Include introduction

Include participant values

Missing Elias result

The panel provides layout only. Headings, values, selection, and knowledge navigation come from the caller. This example uses synthetic content and a local action callback.

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

AnalysisDetailPanel

import { AnalysisDetailPanel, AnalysisDetailIntroduction, AnalysisDetailExplanation } from '@wafm/ui/components/analysis-detail-panel'

<AnalysisDetailPanel aria-label="Erläuterungen">
  <AnalysisDetailIntroduction>
    <h2>Selbstbild</h2>
    <p>{introduction}</p>
    {knowledgeLink}
  </AnalysisDetailIntroduction>
  <AnalysisDetailExplanation aria-labelledby="dimension-title">
    <h3 id="dimension-title">{dimension.label}</h3>
    <p>{dimension.explanation}</p>
    {participantValues}
  </AnalysisDetailExplanation>
</AnalysisDetailPanel>

children / className / HTML aside props: Padded complementary panel. Uses a top divider below the lg viewport breakpoint and a left divider at lg and above. The caller owns its width, placement, content, and selected dimension; use aria-label or aria-labelledby.

AnalysisDetailIntroduction

<AnalysisDetailIntroduction>
  <h2>Selbstbild</h2>
  <p>{introduction}</p>
  {knowledgeLink}
</AnalysisDetailIntroduction>

children / className / HTML section props: Introductory section with text sizing and spacing. Compose headings, paragraphs, and links or buttons. Navigation and actions belong to the caller.

AnalysisDetailExplanation

<AnalysisDetailExplanation aria-labelledby="dimension-title" aria-live="polite">
  <h3 id="dimension-title">Sorgfalt</h3>
  <p>{explanation}</p>
  <dl>{values}</dl>
</AnalysisDetailExplanation>

children / className / HTML section props: Bordered explanation section. Compose the dimension heading, description, values, and missing-result copy. A live region is optional; use it for deliberate selection changes, avoiding announcements on every pointer movement.