DX-1128: localise presentational components (Badge/Button/LinkButton/FeaturedLink/Status)

[jamiehenson]

Part of DX-1128. Localises the presentational components docs uses from @ably/ui.

What

Vendored into src/components/ui/ (rewired to local Icon/cn/colors): Badge, Button, LinkButton, FeaturedLink, Status, plus colors.ts and the Ably logo SVG. swr promoted to a direct dep.

Icon props (leftIcon/rightIcon, iconBefore/iconAfter) now take a ReactNode rather than an icon-name string: callers pass a Heroicon element or an Ably <Icon> glyph directly, and the component sizes it via a slot (preserving each component's original icon size). Internal Heroicon usages (Status, FeaturedLink, plus Footer's flag-gated feedback icons) are converted to direct @heroicons/react imports. Also fixes a noopenner→noopener rel typo in FeaturedLink.

Behaviour

No visual change intended.

Stack (DX-1128)

	PR	Role
	#3409	Design foundation — vendor @ably/ui tokens + reset/core CSS (merged)
	#3410	Local cn + heights utils
	#3411	Docs-native Icon component (Ably glyphs only; Heroicons imported directly)
▶	#3412	Presentational components (Badge, Button, LinkButton, FeaturedLink, Status)
	#3413	Interactive components (SegmentedControl, TabMenu)
	#3414	ProductTile + product data (leaf)
	#3415	syntax-highlighter util + registry
	#3416	Code + CodeSnippet — completes the lift; prunes dead CSS + drops @ably/ui Tailwind scan

#3410–#3416 are a linear stack, each building on the previous; #3409 has merged to main. ▶ = this PR.

Testing

• Load the review app.
• Check a sufficient sample of pages load with no visual regressions.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d314cee6-5c33-45ca-aaf8-48400d6a5d7d

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dx-1128/docs-components-presentational

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[kennethkalmer]

Reviewed against the @ably/ui source. Faithful vendoring — component diffs are entirely prettier/quote-style + import rewiring, no logic drift.

The icon-name→ReactNode flip is done right: the slot reapplies per-size dimensions (lg/md 1.5rem, sm 1.25rem, xs 1rem) matching the old [&>svg]:!w-6/5/4 button-base rules, and !w-full/!h-full overrides a glyph <Icon>'s own inline size. Traced the undefined-size path too (size ?? 'md' → w-6 = 24px ≡ new md = 1.5rem). Sizing preserved exactly. noopener typo fixed; Status/FeaturedLink internal heroicons sized to match (size-4 = 16px, calc(...) unchanged). All migrated-component call sites pass elements; no leftover @ably/ui/core/{Badge,Button,...} imports.

Approving. Two non-blocking notes inline.

~ 𝒢𝓁𝒶𝓊𝒹𝑒

[kennethkalmer]

Heads-up for #3413, not this PR. Widening these to ReactNode means a stray icon-name string still typechecks (string ⊆ ReactNode) and renders as literal text in the slot rather than erroring. ExamplesRenderer.tsx:166 still passes leftIcon={icon-tech-${languageKey}} — fine today because that's SegmentedControl (still @ably/ui), but the same string lands in a vendored component the moment #3413 rewires SegmentedControl. Worth catching when you migrate it.

~ 𝒢𝓁𝒶𝓊𝒹𝑒

[kennethkalmer]

nitpick: this slot span (inline-flex shrink-0 [&>svg]:!w-full [&>svg]:!h-full + inline w/h + colour class) is duplicated almost verbatim in Badge.tsx (iconBefore/iconAfter). Could lift to a shared IconSlot helper so the sizing convention lives in one place. Non-blocking.

~ 𝒢𝓁𝒶𝓊𝒹𝑒