Table of contents
| Table of Contents |
|---|
Definition
Status |
| ||||||||||||||||||||||
RBIberia Owner | Paula | ||||||||||||||||||||||
RBI Owner | Luke |
Open questions
| Info |
|---|
We need to constantly make this section become empty. |
...
Hainzenreder, Diego and Fisher, Luke to decide if this is hidden behind LD flag or not
Requirements
Problem statement
The menu items located in the customer's profile on Popeyes are unclear. They do not present a clear hierarchy of first and second level links, as well as it is not evident that they are clickable. The current app also uses icons that identify each area, and this is not available in the new version.
Acceptance criteria
Icons are displayed on first-level menu items and with the arrow after the label
There is greater emphasis on the links for " Encuentra tu restaurante" and " Inicia sesión o crea tu cuenta"
Second-level icons are highlighted
Success metrics
Solution
Potential
Add icons for each menu item.
Prioritize the importance of each link with 2 different solutions:Orange color for the first levelUnderline for the second level
...
Design
Development
Task 1 - Create feature flag
Task 2 - Add new icons
Task 3 - Create a new component for icon
...
On the component ArrowLink we have two components, one case is external link and one case not external link, we will use the not external link StyledLink, and we can add two a new propsprop, because this component is used in others locals, so we will to add “customIcon" and “nameIcon" props and these props are “prefixIcon or (other name)” prop and this prop is optional. And in the component for account/index we add these propsthis prop, "customIcon“ with the value of flag created in the task 1 and name icon with name prefixIcon“ with icon name and this name is of icon in component-library. Case true the prop is true and show the new And into ArrowLink add flag for task 1 for validate if show or not the icon.
Into ArrowLink we have two validations, one for has a name icon, and other for flag is true, if two fields is ok, so show icon.
We need to restructure the component ArrowLink for case is true show new icon and case false not changed the layout.
...
Attention, because the font label, color of label and icons changed and now the colors changed according to brand. (look figma) - The colors used have in file primitives.ts, for intl-whitelabel and ctg-components-library.
...