Three Tier on Banner (V1) #13041
Merged
Three Tier on Banner (V1) #13041
Conversation
This file contains 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
…bile as the boolean isn't in the right place export a lot of the exisiting logic as we're reusing a lot of functionality
|
Size Change: 0 B Total Size: 871 kB ℹ️ View Unchanged
|
minor mobile spacing
charleycampbell
commented
Jan 10, 2025
| }: BannerRenderProps): JSX.Element => { | ||
| const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet)); | ||
| const isDesktopOrAbove = useMatchMedia(removeMediaRulePrefix(from.desktop)); |
There was a problem hiding this comment.
This is required so we don't display the logo on the tablet breakpoint
charleycampbell
added
run_chromatic
github-actions
bot
removed
the
run_chromatic
fixed spacing issues
charleycampbell
commented
Jan 10, 2025
|
|
||
| ${from.tablet} { | ||
| display: grid; | ||
| grid-template-columns: 1fr 280px; | ||
| grid-template-columns: 1fr 1fr 1fr; |
There was a problem hiding this comment.
If this isn't set like this the columns on either side collapse and the content which isn't correct. I think a chat with design would be helpful to get the widths of those columns.
github-actions
bot
removed
the
run_chromatic
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
shtukas
approved these changes
Jan 12, 2025
Updated storybook to reflect accurate background colour
charleycampbell
commented
Jan 16, 2025
| <div css={styles.priceHeadline}>£12/month</div> | ||
| <div> | ||
| <LinkButton | ||
| href={'https://support.theguardian.com/contribute'} // URL will need to be updated |
There was a problem hiding this comment.
The URLs will be updated before this test is launched https://trello.com/c/kCh5Nn02/354-setup-ab-testing-of-new-banner-design
There was a problem hiding this comment.
card to make change to URLs https://trello.com/c/84LDsJsG/384-update-urls-on-new-banner-designs
…c/three-tier-desktop-v1
github-actions
bot
removed
the
run_chromatic
github-actions
bot
removed
the
run_chromatic
|
Seen on PROD (merged by @charleycampbell 7 minutes and 45 seconds ago) Please check your changes! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
What does this change?
This is the second PR in the effort to rework designable banners on tablet and desktop breakpoints.
Further refinements have been made to use CSS Grid, ensuring the layout adapts to the distinct designs for each breakpoint. The new designs have a different layout on the banner for desktop and above, tablet and from phablet and small.
Introduced a new file for Three-Tier Choice Cards, as the existing implementation couldn't be reused due to the new design placing the button directly on the choice card.
There are a few open design considerations/questions that will need input when work on this project resumes. These can be found here. Also helpful to note, this isn't being used anywhere.
Why?
Part of the work on refreshing the banners and goes along with Mobile breakpoint V1 based off of this Figma
Screenshots
Tablet:
Desktop
Wide
