Questions:
N/D
Technical Refinement
Description
Today in Sanity’s Hero Component there’s a Reversed
option that can be toggled on that enables a background color and changes the texts and buttons to a light color
intl-whitelabel-app
TASK 1–Create feature flag
TASK 2–Create color constants
Background colors:
Burger King:
Brown (default option)
Red
Green
Orange
Yellow
Popeyes:
Orange (default option)
Purple
Firehouse Subs:
Red (default option)
Yellow
Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74806&t=6vGuil8CU4c3vOzP-1 - Connect your Figma account
Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A68295&t=zNRPSr8NnlQB10C0-1 - Connect your Figma account
Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105586&t=DNksX5RjI3ZEfBeU-1 - Connect your Figma account
TASK 3—Apply changes to full background
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
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
TASK 4—Apply changes to Split Background
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
intl-whitelabel-cms
TASK 5–We will need to add a new toggle named
Background Color
path:
intl-whitelabel-cms/schemas/components/documents/hero.tsx
We will need to add 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.”
TASK 6–We will need to create a dropdown
path:
intl-whitelabel-cms/schemas/components/documents/hero.tsx
Use the example:
intl-whitelabel-cms/schemas/configuration/pos-configuration/documents/pos-configuration.ts
intl-whitelabel-cms/schemas/configuration/pos-configuration/objects/pos-vendor-config-option.ts
Create a dropdown to choose the background color with the following options
When the
Background Color
toggle is on it should show:Burger King:
Brown (default)
Red
Green
Orange
Yellow
Popeyes:
Orange (default)
Purple
Firehouse Subs:
Red (default)
Yellow
TASK 7–We will need to add a toggle named
Split Background
path:
intl-whitelabel-cms/schemas/components/documents/hero.tsx
We will need to add a toggle named
Split Background
(default is false)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 reduced
TASK 8—Deprecate
Reversed
togglepath:
intl-whitelabel-cms/schemas/components/documents/hero.tsx
The
Reversed
toggle should be deprecatedThe
Reversed
toggle option should be removed from Sanity’s UI
Screenshots
N/D
POC
N/D
Impact Analysis
Hero component
Dependencies
N/D
Unit Test
N/D
Useful Links
Full-Color Background:
Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74806&t=6vGuil8CU4c3vOzP-1 - Connect your Figma account
Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A68295&t=zNRPSr8NnlQB10C0-1 - Connect your Figma account
Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105586&t=DNksX5RjI3ZEfBeU-1 - Connect your Figma account
Split Background:
Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74807&t=ylezOnsQVDmMGLZo-1 - Connect your Figma account
Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A68616&t=zNRPSr8NnlQB10C0-1 - Connect your Figma account
Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105587&t=DNksX5RjI3ZEfBeU-1 - Connect your Figma account
Add Comment