Implement conditional visibility for Hero Section variants #15391
+58
−5
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.
Description
This PR adds dynamic field visibility in the
Hero Sectionbased on the selected hero_variant. When users select "Side by Side", thehero_background_colorfield is automatically hidden since it's only applicable to the "Top to Bottom" layout variant.This improves UX by preventing confusing configuration options and ensures content editors only see relevant fields for their selected layout.
Note: for the Dynamic Help Text for "Hero Image", this PR uses the fallback of updating the help text with fixed text for both variants, since the framework does not easily allow dynamic help text overwrites.Related PRs/issues: https://mozilla-hub.atlassian.net/browse/TP1-3608
Main changes:
Stimulusinfrastructure reusedMultiFieldPanelwithMediaPanelfor Hero Section and configuredtrigger_field="hero_variant"hero_background_coloris required for the 'Top to Bottom' variant, but not for the 'Side by side' variantHow to test
Select "Side by Side" (hero_background_color should disappear)Select "Top to Bottom" (hero_background_color should appear)Images - Local tests (Review app in progress )