573 - storybook hero and DS fixes#574
Open
flacoman91 wants to merge 4 commits into
Open
Conversation
flacoman91
requested review from
anselmbradford,
billhimmelsbach,
contolini and
natalia-fitzgerald
as code owners
|
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.
Addresses #573
Hero and Storybook preview were drifting from what the DS actually does, so this tightens both up.![]()
inside .m-hero__image while the DS pattern is an empty node with background-image and a fixed aspect ratio.
For the Hero, we were using an
The img natural height drive the grid row, which is why the wrapper looked so tall compared to cfpb.gov.
We switched to the background-image (how DS does it) approach and use aspect-ratio: 940 / 390 to match the usual 940×390 art (same idea as the old padding-bottom: ~41.49% hack on live pages).
Overlay/photo heroes use a 16:9 slot on that node for mobile.
Tests now target role="img" instead of alt on an img.
On Storybook, we stopped applying the long-form layout tweaks (paragraph max-width, pre styling, etc.) to #storybook-root so the canvas is just DS + component CSS.
Those rules only apply under #storybook-docs now.
We also set layout: 'fullscreen' so we’re not losing width to the default padded body. Viewport defaults are a bit clearer (explicit desktop preset, desktop width aligned with how we test large layouts).
This should fix what you see on the Landing page in CE when it gets merged in.