feat(storybook): expand existing /ui/ stories by myelinated-wackerow · Pull Request #18126 · ethereum/ethereum-org-website

myelinated-wackerow · 2026-05-05T03:43:12Z

Summary

Expands the existing Storybook stories for src/components/ui/ primitives to meet the "see every variant" standard. This is PR 5 of 5 for #18121, scoped to existing stories that needed broader coverage. One commit per checkbox in the issue.

Card -- moved from src/components/ui/card.stories.tsx to src/components/ui/__stories__/Card.stories.tsx. Added Default, BannerSizes, TitleWeights, ParagraphVariants, HeroCard, LinkCard. Existing BannerBackgrounds + BannerFit retained.
Tag -- replaced status/variant/size matrices with focused per-axis stories. Added StatusVariantMatrix grid, Buttons (TagButton), and InlineText (TagsInlineText) stories.
Table -- one focused story per variant: Simple, Minimal, SimpleStriped, MinimalStriped, Product (new), HighlightFirstColumn (new). MockDocContent retained.
Alert -- added Default, WithIcon (AlertIcon), WithEmoji (AlertEmoji), and SizeFull stories. Existing variant + close-button stories rationalized.
Button -- added Default, Sizes, SizeVariantMatrix, IsSecondary (showing no-op on solid/link), AsChild. Existing IconVariants + MultiLineText preserved.
ButtonLink -- Default, Variants, Sizes, IsSecondary, plus auto-detection (ExternalLink, FileDownload, HashLink).
Link -- split into focused stories per export (InlineLink, BaseLink, LinkWithArrow). Added ExternalDetection, MailtoDetection, FileExtensionDetection, HashLink. LinkList retained.
Accordion -- renamed accordion.stories.tsx -> Accordion.stories.tsx to match PascalCase convention. Added SingleCollapsible, Multiple, HideIcon, CustomTrigger, RtlChevron.
EdgeScrollContainer -- Default (renamed from Basic), WithoutSnap, AsChild (now using <button> to avoid @next/next/no-html-link-for-pages lint), CustomSpacing, FewItems.
Avatar -- added BasePrimitives (AvatarBase + AvatarImage + AvatarFallback) and FallbackOnly stories. Existing Sizes, WithLabel, Group, BrokenImageFallback rationalized.
TerminalTypewriter -- Retitled to UI / TerminalTypewriter. Added StaticMessages, SingleMessage (loop behavior), LongMessage (wrap behavior), Empty (no-render safety check). Existing translated-messages Default retained.

All 11 stories retitled to UI / [Name] to match the hierarchy established in #18122 / #18123 / #18124 / #18125.

Removed

ButtonTwoLines and ButtonLinkTwoLines -- expansions were added (6d14f79, b3d293e) and then removed (9e45eee, a155874), along with the original story files that lived on dev. Components are being removed in a separate cleanup; the stories would be orphaned, so they shouldn't ship.

Skipped from the issue

Modal -- already retitled and expanded in PR 1 (feat(storybook): add overlay primitive stories #18122). Not redone here.

Notes for review

Card move uses git mv so history follows the file. The diff shows as a delete + add because the contents grew substantially; rename detection should still hold up to git log --follow.
Accordion rename is the same story.
Tag StatusVariantMatrix is a wide grid. Useful for spotting compound-variant regressions; designers may prefer the focused per-axis stories above it for everyday browsing.
Avatar meta sets default args (name, src, href) so render-only stories satisfy the required props without per-story duplication.
Accordion uses StoryObj (no generic) because the Radix Root type is a discriminated union that resolves to never when generic over Meta<typeof Accordion>.
One follow-up surfaced while writing these stories: Select lacks a hasError variant (called out in feat(storybook): expand form input stories #18123). Out of scope for this PR.

Test plan

Eyeball each expanded story in Storybook (light + dark, locale toggle)
a11y addon passes for each story
Confirm Accordion RtlChevron story flips the chevron when locale is set to RTL (Arabic, Urdu)
Confirm Card LinkCard propagates hover-group classes (banner image scales, title underlines)

Refs: #18121

Move from `src/components/ui/card.stories.tsx` to `src/components/ui/__stories__/Card.stories.tsx` to match convention. Retitle to `UI / Card`. Add Default, BannerSizes (`full|thumbnail`), TitleWeights (`semibold|bold|black`), ParagraphVariants, HeroCard composite, and LinkCard composite (showing hover-group propagation). Existing BannerBackgrounds and BannerFit stories carried over. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Retitle to `UI / Tag`. Replace status/variant/size matrices with focused per-axis stories: Statuses (all 12), Variants (all 4), Sizes (small/medium). Add StatusVariantMatrix grid for spotting regressions, Buttons story (`TagButton`), and InlineText story (`TagsInlineText` with delimiter/max/variant variants). Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Retitle to `UI / Table`. Replace combined-render kitchen-sink with one focused story per variant: Simple, Minimal, SimpleStriped, MinimalStriped, Product, HighlightFirstColumn (the two new variants per #18121). MockDocContent retained for realistic markdown-table composition. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Retitle to `UI / Alert`. Add Default (single variant), WithIcon (`AlertIcon` + lucide), WithEmoji (`AlertEmoji`), and SizeFull (banner) stories. Existing Variants and WithCloseButton stories updated to include all five variants in focused renders. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Retitle to `UI / Button`. Add Default, Sizes (`lg|md|sm`), SizeVariantMatrix grid, IsSecondary (showing no-op on solid/link), and AsChild (anchor wrapping). Existing Variants (renamed from StyleVariants), IconVariants, and MultiLineText stories preserved. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Retitle to `UI / ButtonLink`. Add Default, Variants, Sizes, IsSecondary, and three auto-detection stories (ExternalLink, FileDownload, HashLink) covering BaseLink's automatic behaviors. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Retitle to `UI / ButtonTwoLines`. Add Default, Variants (`solid|outline`), Sizes (`md|sm`), VariantSizeMatrix, IconAlignmentEnd, ReverseTextOrder, and VariousIcons stories. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Retitle to `UI / ButtonLinkTwoLines`. Add Default, Variants, Sizes, VariantSizeMatrix, ExternalLink, FileDownload, and ReverseTextOrder stories. Mirrors the ButtonTwoLines coverage with link auto-detection behaviors layered on top. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Retitle to `UI / Link`. Add focused stories for the three exports: InlineLink (in-prose, with visited), BaseLink (no visited), LinkWithArrow (RTL-flipping arrow). Add ExternalDetection, MailtoDetection, FileExtensionDetection, HashLink stories covering BaseLink's auto-detect behaviors. LinkList composition retained. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Rename `accordion.stories.tsx` to `Accordion.stories.tsx` to match the PascalCase convention used by every other file in `__stories__/`. Retitle to `UI / Accordion`. Add SingleCollapsible, Multiple, HideIcon, CustomTrigger, and RtlChevron stories. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Retitle to `UI / EdgeScrollContainer`. Rename `Basic` -> `Default`. Replace `AsChildExample`'s raw anchor with a `<button>` (no `@next/next/no-html-link-for-pages` lint hit). Add CustomSpacing and FewItems stories. Component description documents the CSS-variable props. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Retitle to `UI / Avatar`. Reorganize existing stories (Sizes, WithLabel, Group, BrokenImageFallback) and add focused sub-component stories: BasePrimitives (`AvatarBase` + `AvatarImage` + `AvatarFallback` for custom compositions) and FallbackOnly (`AvatarFallback` without image source). Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

netlify · 2026-05-05T03:43:22Z

❌ Deploy Preview for ethereumorg failed.

Name	Link
🔨 Latest commit	`d22020d`
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/6a047130a2445e0008b23f83

Retitle to `UI / TerminalTypewriter`. Add StaticMessages, SingleMessage (loops on a single string), LongMessage (wrap behavior), and Empty (no-render safety check). Existing translated-messages Default retained. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Component is being removed in a separate cleanup; story shouldn't ship. Replaces the expansion in 6d14f79 and the original story file that lived on dev. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Component is being removed in a separate cleanup; story shouldn't ship. Replaces the expansion in b3d293e and the original story file that lived on dev. Refs: #18121 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

For the expand-existing-stories PR, preserve regression coverage on stories whose names match what existed on dev (Alert/Variants, Avatar/BrokenImageFallback, Button/IconVariants, etc.) and disable snapshots only on truly new exports. Files where every export is renamed/new (Accordion, Card, ButtonLink, Tag) get a meta-level disable. Snapshots can be re-enabled per-story once we assess which views need regression coverage. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

pettinarip

@myelinated-wackerow looks fine overall. Just some duplicated paramters entries on some stories.

myelinated-wackerow and others added 12 commits May 4, 2026 20:31

myelinated-wackerow requested review from minimalsm, pettinarip and wackerow as code owners May 5, 2026 03:43

myelinated-wackerow and others added 3 commits May 5, 2026 15:29

This was referenced May 6, 2026

chore(design-system): remove unused components and stale assets #18131

Closed

chore(design-system): remove unused components and stale assets #18134

Merged

pettinarip reviewed May 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(storybook): expand existing /ui/ stories#18126

feat(storybook): expand existing /ui/ stories#18126
myelinated-wackerow wants to merge 16 commits into
devfrom
feat/storybook-expand-existing-stories

myelinated-wackerow commented May 5, 2026 •

edited

Loading

Uh oh!

netlify Bot commented May 5, 2026 •

edited

Loading

Uh oh!

pettinarip left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

myelinated-wackerow commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Removed

Skipped from the issue

Notes for review

Test plan

Uh oh!

netlify Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for ethereumorg failed.

Uh oh!

pettinarip left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

myelinated-wackerow commented May 5, 2026 •

edited

Loading

netlify Bot commented May 5, 2026 •

edited

Loading