feat(hateoas-bff): restyle frontend with Editorial design#6
Open
feffef wants to merge 3 commits into
Open
Conversation
Apply the Editorial design direction from the claude.ai/design handoff bundle (warm off-white background, deep ink, coral accent, Inter Tight / Inter / JetBrains Mono typography) to the HATEOAS BFF example frontend. Keeps DaisyUI + Tailwind + Alpine.js stack intact and preserves every data-test attribute and ARIA hook the Playwright suite depends on — only styling, layout, and copy change. Elements from the design mock with no backing data in the current BFF schema (link-inspector drawer with synthetic timings/data-source latency, the floating view-switcher, hardcoded review counts) are omitted; meta.dataSources powers the signature attribution footer strip. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Remove flex-wrap and shrink the gaps in the header so the utility rail (search + wishlist + cart + greeting) stays on the same line as the brand and primary nav. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Grid and recommendation cards now navigate to the product detail view when clicked anywhere, not just on the small "View Details" link. Inner actions (wishlist toggle, add-to-cart, View Details) use @click.stop so they don't double-fire navigation. The list-item role is preserved so accessibility-driven test selectors keep working, and "View Details" remains the keyboard/screen-reader entry point. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
hateoas-bffexample frontend with the "Editorial" direction from a Claude Design handoff (warm off-white base, deep ink, coral accent, Inter Tight / Inter / JetBrains Mono). Keeps Alpine.js + Tailwind/DaisyUI intact — only styling changed.FrontendStateSchema(link-inspector drawer, per-source timings, view switcher). The signature coral-dotted source-attribution strip is wired tometa.dataSources.Test plan
npm run typechecknpm run test:playwright(82 passed, incl. axe-core a11y audits)🤖 Generated with Claude Code