forked from coracle/caravel
Jon Staab
75 lines
4.2 KiB
Markdown
75 lines
4.2 KiB
Markdown
# Components
|
|
|
|
This file defines the spec components used across `frontend/spec/pages/*.md`.
|
|
|
|
- **page**: Root container for a route-level screen. Carries route metadata like `path`, auth requirements, and layout shell.
|
|
- **nav**: Top navigation area for primary brand and session-aware links.
|
|
- **header**: Top content block for a page or section, usually containing a title.
|
|
- **section**: Logical grouping of related content within a page.
|
|
- **hero**: Prominent introductory content block for a page.
|
|
- **heading**: Section heading wrapper that pairs a title with optional supporting copy.
|
|
- **title**: Primary label text for a page, section, card, or control.
|
|
- **description**: Supporting explanatory text under a title or heading.
|
|
- **text**: Generic body text when no more specific semantic component applies.
|
|
- **help_text**: Small informational guidance text, usually near forms or auth flows.
|
|
|
|
- **brand**: Product identity block (name/logo).
|
|
- **badge**: Small status/highlight label.
|
|
- **status**: Current state indicator for an entity (for example relay status).
|
|
- **meta**: Secondary metadata text (IDs, pubkeys, auxiliary attributes).
|
|
- **copyright**: Footer legal ownership line.
|
|
|
|
- **link**: Navigational text/action leading to another route or URL.
|
|
- **links**: Group of related link components.
|
|
- **back_link**: Explicit “go back” navigation link to a parent/list view.
|
|
- **back_button**: Button-style backward navigation within a multi-step screen.
|
|
- **button**: Generic clickable action control.
|
|
- **submit_button**: Primary form submission control with optional loading label.
|
|
|
|
- **actions**: Container for action controls associated with a section/card.
|
|
- **controls**: Container for filters/search/sort controls.
|
|
- **tabs**: Container for tabbed navigation controls.
|
|
- **tab**: A selectable tab option within `tabs`.
|
|
- **screen**: Named sub-view/state within a page (e.g., a login subflow).
|
|
- **modal**: Overlay dialog for focused temporary interaction.
|
|
|
|
- **form**: Form container for user input and submission behavior.
|
|
- **field**: Structured form field abstraction (label + input type + validation intent).
|
|
- **input**: Single input control for user-entered values.
|
|
- **select**: Dropdown control for choosing one option from many.
|
|
- **option**: A selectable value within `select` or plan/method groups.
|
|
- **copyable_input**: Read-only input-like field designed for quick copy actions.
|
|
- **tooltip_error**: Inline or anchored validation error shown near a specific field.
|
|
- **error_message**: Message shown when an action fails.
|
|
- **error_state**: Full-state error presentation for failed data loading.
|
|
- **loading_state**: Full-state loading presentation while data is being fetched.
|
|
|
|
- **list**: Repeating collection container.
|
|
- **item**: Single element within a repeating collection.
|
|
- **grid**: Multi-column layout container for repeated items/cards.
|
|
- **card**: Bounded content block used in feature grids and summaries.
|
|
- **product**: Specialized card describing an external ecosystem product/integration.
|
|
- **relay_detail_card**: Composite card summarizing relay properties and management actions.
|
|
|
|
- **avatar**: User/profile image representation.
|
|
- **bullets**: Container for short point-form highlights.
|
|
- **toggle**: On/off control for a boolean feature or policy.
|
|
- **toggles**: Group of related boolean toggle controls.
|
|
- **plan_selector**: Control used to switch between available relay plans.
|
|
- **pricing_table**: Plan comparison and pricing presentation block.
|
|
- **member_count**: Display of current member usage for a relay.
|
|
- **members**: Plan capacity descriptor (member limits).
|
|
- **price**: Plan pricing descriptor.
|
|
- **tenant**: Tenant identity/value display in admin-oriented contexts.
|
|
- **created_at**: Human-readable creation timestamp display.
|
|
- **bolt11**: Lightning invoice string display.
|
|
- **qr_code**: Visual QR representation of a connection URI.
|
|
- **camera_preview**: Live camera viewport used for scanning QR codes.
|
|
|
|
## Control directives used in specs
|
|
|
|
These appear in the Pug-like spec language but are flow directives rather than UI components:
|
|
|
|
- **if / else**: Conditional branch based on a boolean condition.
|
|
- **when**: Conditional rendering keyed off a selected tab/state/value.
|