Skip to content

Pin Foundations on top, brand per framework, add logo#67

Merged
sjoerdbeentjes merged 2 commits into
mainfrom
feat/storybook-housekeeping
Jul 1, 2026
Merged

Pin Foundations on top, brand per framework, add logo#67
sjoerdbeentjes merged 2 commits into
mainfrom
feat/storybook-housekeeping

Conversation

@sjoerdbeentjes

Copy link
Copy Markdown
Collaborator

Summary

  • Sidebar order: "Foundations" now always sorts above "Components", alphabetically within each, identically in both Storybooks. Had to move storySort into a literal in each preview.ts — Storybook's index generator reads it via static AST analysis and never executes the shared @surfnet/storybook-config module, so a value reached through a spread was silently ignored.
  • Top-left Storybook title now shows the framework name, e.g. "SURF Design System — React" / "— Angular", via registerManager(framework).
  • Added the SURF logo (packages/storybook-config/src/logo.ts, inlined as an SVG data URI so it works identically under both the Vite and webpack manager builds) as brandImage.
  • README: linked both deployed Storybooks and fixed the Angular local dev port typo (6006 → 6007).

Test plan

  • pnpm build and pnpm lint pass
  • Verified both Storybooks locally: Foundations on top, matching Components order, framework-specific title, logo renders correctly

Fixes the sidebar order so Foundations always sorts above Components and
stays alphabetically consistent between the React and Angular Storybooks
(storySort has to be a literal per preview.ts — Storybook's index generator
reads it via static AST analysis and never executes the shared config
module). Also brands each Storybook's title with its framework name and
adds the SURF logo, and links both deployed Storybooks from the README.
@sjoerdbeentjes sjoerdbeentjes changed the title chore(storybook): pin Foundations on top, brand per framework, add logo Pin Foundations on top, brand per framework, add logo Jul 1, 2026
The logo was rendering at Storybook's brandImage cap (100px tall). Now
it's a small icon with "Design System - <Framework>" text next to it,
which requires leaving brandImage unset so Storybook renders brandTitle
as raw HTML instead of plain text. Also trims some overly long comments
and drops a stale commented-out code example.
@sjoerdbeentjes sjoerdbeentjes merged commit a1a03a3 into main Jul 1, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant