Organism · beta · v1.0.0 · owner: Site system lead · contract 19 of 20 points (open: figma)
Do and don't
Do: English link
Rendered by product-tour.tsOpen example: Product tour · Do: English link Use the full-page example to follow page links.
Do: English link to the separate tour
Rendered by product-tour.tsOpen example: Product tour · Do: English link to the separate tour Use the full-page example to follow page links.
Don't: Treating the link as an embedded app
Rendered by product-tour.tsOpen example: Product tour · Don't: Treating the link as an embedded app Use the full-page example to follow page links.
Don't: Claiming a translated wrapper
Rendered by product-tour.tsOpen example: Product tour · Don't: Claiming a translated wrapper Use the full-page example to follow page links.
Rules
| Rule | Why | Check |
|---|---|---|
| The Site wrapper emits only its fixed English native link to /product-tour/#/control; destination-app internals are a separate consumer. | Consumers must not infer embedded fields, translated copy, data loading or task acceptance from a navigation link. | Automated: tests/unit/site-system.test.ts (actual positive renders); tests/site/pages.spec.ts (every internal link resolves) |
API
No props.
Contract details
The full contract: identity, anatomy, variants, states, tokens, layout, motion, accessibility, content, tests
Identity
| Aspect | Value |
|---|---|
| Id | product-tour |
| Layer | Organisms |
| Category | navigation |
| Owner | Site system lead |
| Status | beta |
| Version | 1.0.0 |
| Source | apps/showcase/site/system/organisms/product-tour.ts (private repository; the contract and the render function are this one module) |
| Version | Date | Change |
|---|---|---|
| 1.0.0 | 2026-10-26 | Site link to the separately routed read-only product tour. |
Use when
- Site content offers the read-only product tour. Why: A native link takes the reader into the separate app without pretending to embed its screens.
Do not use when
- An embedded application or form is required. Why: This wrapper is only navigation; the destination app owns its own routes, locale and task behavior.
Anatomy
| Part | What it is |
|---|---|
| root | A native paragraph |
| link | a[href="/product-tour/#/control"] with its fixed visible English name |
Made of: tokens:type, tokens:colour.
Used in: page-apps.
Variants
| Variant | When | Why |
|---|---|---|
| default | Wherever the page declaration places it. | One shape per job keeps pages predictable. |
States
| State | Rendered or not applicable |
|---|---|
| default | This Site component renders one English link to /product-tour/#/control. The separately routed read-only app owns its own screens and lifecycle. |
| hover | The native link uses the surrounding Site link hover affordance. |
| focus-visible | The native link takes focus in reading order and uses the Site focus ring. |
| active | Not applicable: Following a link is native navigation, not an in-place pressed/playback state. |
| disabled | Not applicable: The renderer always supplies its existing destination; it has no disabled-link API. |
| loading | Not applicable: The link is complete build-time content; loading in the destination app is outside this renderer. |
| empty | Not applicable: The fixed link text/destination has no empty-data variant. |
| error | Not applicable: Destination app errors are outside this link renderer; no managed host or task-app failure UI is rendered here. |
| current | Not applicable: This link leads into the tour and does not mark a current app screen. |
| visited | Visited history belongs to the native link; Site link color remains inherited. |
| expanded | Not applicable: The link does not disclose an embedded application. |
Tokens
| Part | Token |
|---|---|
| link.color | inherit |
| link.underline | --rule-hair |
| link.underline-offset | --space-2 |
| link.focus | --focus |
| --product-tour-font-type-body | var(--type-body) |
| --product-tour-letter-spacing-ls-body | var(--ls-body) |
Layout
| Aspect | Value |
|---|---|
| breakpoints | Uses the containing text column at its supported viewport widths; no embedded app layout. |
| wrapping | The native link wraps at spaces. |
| textExpansion | Fixed English wording; no locale prop or translated link is implemented here. |
Spacing and rhythm
| Aspect | Value |
|---|---|
| internal | No wrapper padding; native link in a paragraph. |
| external | The containing Site composition owns paragraph spacing. |
| rhythm | At the point where the reader is offered the separate tour. |
Motion
| Aspect | Value |
|---|---|
| None | A static native link; the destination application is a separate consumer. |
Runtime and reuse
Render-only element; mount any registered child enhancements separately. Preserve required Site CSS, fonts, responsive and locale rules from nativeElement.
Accessibility passport
| Aspect | Value |
|---|---|
| role | Native link; this renderer does not contain application panels or fields. |
| name | Its visible text |
| keyboard | Tab to the link; Enter follows its existing destination. |
| focus | The link follows normal document reading order. |
| screenReader | Reads Open the read-only product tour and its link role. |
| contrast | Inherits the surrounding Site text/link colors; evaluate the actual containing field. |
| target | Native text-link target; no dedicated44px control surface is implemented by this wrapper. Check target spacing in the consuming layout. |
Content
| Slot | Length | Voice |
|---|---|---|
| link name (fixed English renderer text; no content prop) | Open the read-only product tour exactly | Describe native navigation into the separate read-only tour. Do not imply that the Site wrapper renders application fields, translated screens or a live client system. |
Good: “Open the read-only product tour”
Bad: “An embedded form or translated app is rendered here”
Japanese: This wrapper link remains English. The separately routed destination owns its own locale; no Japanese link label is authored by this renderer. Mark the English source language in a Japanese consuming context instead of claiming a translated wrapper.
Icons and illustrations
None: this element uses no icon or illustration of its own.
Decisions and exceptions
- None.
Usage
7 uses across the built pages (measured by npm run site:system).
Tests
| Aspect | Value |
|---|---|
| unit | tests/unit/site-system.test.ts: renders every do and don't example through the registry and checks the classes it owns |
| visual | Not yet: there are no screenshot baselines; the Library page is checked for sideways scroll at 1440 px by tests/site/system.spec.ts |
| a11y | tests/site/system.spec.ts: axe (0 serious or critical) on the element's Library page in light and dark |
| parity | scripts/site/system/check.ts: Library examples are rendered by the same render function the site imports |
Figma
not-yet: The Loom Site Figma library is the last stage of the plan; this element is not mapped yet.