Diary

A specialized card component system for displaying health measurement data and diary entries in healthcare applications. The Diary module provides interactive cards with measurement display capabilities, designed for medical tracking and patient monitoring workflows.

Key FeaturesCopy Anchor Link

• Measurement Display: Specialized cards for health metrics and diary entries
• Data State Management: Visual distinction between measured and unmeasured states
• Compound Components: Flexible architecture using the compound component pattern
• Healthcare Icons: Integration with measurement type icons for visual identification
• Interactive Cards: Touch-enabled cards for navigation and data entry
• Host-configured accessibility: Add labels, roles, and announcements in the app around the diary content; the module does not provide complete screen-reader semantics for every compound child

ComponentsCopy Anchor Link

DiaryCardCopy Anchor Link

The main card component that serves as a container for diary entries and measurement data with automatic styling based on data availability.

Sub-components:

• DiaryCard.StartSection - Header section with icon and optional right content
• DiaryCard.TaskIcon - Measurement type icons (inherited from Tile module)
• DiaryCard.Title - Card title text (inherited from Tile module)
• DiaryCard.MeasuredValue - Value display with unit and timestamp (inherited from Tile module)
• DiaryCard.NoData - Empty state indicator for unmeasured data

ArchitectureCopy Anchor Link

The Diary module extends the Tile module's compound component pattern, specializing it for healthcare diary and measurement use cases:

Compound Component DesignCopy Anchor Link

• Main Container: DiaryCard provides theming, touch handling, and state-aware styling
• Inherited Components: Reuses TaskIcon, Title, and MeasuredValue from the Tile module
• Custom Components: StartSection and NoData designed specifically for diary workflows
• Data State Awareness: Automatic visual styling based on hasData prop