...
There should be added a new toggle option named
Background Color
The description of the toggle should be updated to “Turn this on to add and choose a background color for the homepage Hero.”
When the
Background Color
toggle is off, we must take in account theReversed
toggle.When the
Background Color
toggle is on it should show:A dropdown to choose the background color with the following options:
Burger King:
Brown (default option)
Elements over this background should be displayed in their reversed (light color) version
Red
Elements over this background should be displayed in their reversed (light color) version
Green
Elements over this background should be displayed in their reversed (light color) version
Orange
Yellow
Popeyes:
Orange (default option)
Elements over this background should be displayed in their reversed (light color) version
Purple
Elements over this background should be displayed in their reversed (light color) version
Firehouse Subs:
Red (default option)
Elements over this background should be displayed in their reversed (light color) version
Yellow
There is no needed to become the dropdown as required, because there will be default values selected on dropdown.
Another toggle named
Split Background
The
Split Background
toggle should have the following description: “Turn this on to split the background color.”By turning the
Split Background
toggle on the background color area should be reducedThe Heading and Sub-Heading should be displayed over the colored background
The CTAs should be displayed below the colored background area
The background color of the bottom portion should not be configurable
The
Reversed
toggle should be deprecatedThe
Reversed
toggle option should be removed from Sanity’s UI: This will be removed in another sprint.If the Background color toggle option is on, the
Reversed
toggle functionality will be overridden.If the
Reversed
toggle was on when deprecated it should now point and default to the newBackground Color
toggle defaulting to theon
state in the respective colors:Burger King
Brown
Popeyes
Orange
Firehouse Subs
Red
If the
Reversed
toggle is/was off, the background color will be transparent, as it was.
It should not be a permanent LD flag
L&F
For Desktop view:
The elements and the image must be displayed side-by-side and the margins/paddings top and bottom must be following to design on Figma respecting the image height. If the image height is bigger than the sample image available on Figma, the margins/paddings top and bottom will be bigger too.
For Mobile view:
The elements and the image must be displayed one under the other.
Responsiveness:
The hero component should maintain a consistent and responsive design across different screen sizes and devices. The component should adapt to different screen resolutions and maintain legibility and usability.
Designs:
Full-Color Background:
Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74806&t=6vGuil8CU4c3vOzP-1
Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A68295&t=zNRPSr8NnlQB10C0-1
Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105586&t=DNksX5RjI3ZEfBeU-1
Split Background:
Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74807&t=ylezOnsQVDmMGLZo-1
Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A68616&t=zNRPSr8NnlQB10C0-1
Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105587&t=DNksX5RjI3ZEfBeU-1
...