[Archived] Feature - Customize Hero Component

Owned by Bandoch dos Santos, Diego (Deactivated)
Last updated: May 13, 2024 by Silva, Carlos
5 min read

This a template that should be used to document each feature. It’s meant to be easy, not prescriptive - change it at will!

Table of contents

Definition

Status

IN DESIGN

RBIberia Owner

Paula

RBI Owner

Carlos

Open questions

We need to constantly make this section become empty.

Requirements

Current component:

Web

Mobile

 

  1. Have a configuration on Sanity to hide the secondary button “See Menu“

  2. When the secondary button is hidden, the primary button(“Order now“) will have the width expanded.

  3. The card be adjustable based on the image size, current the card has a fixed size.

  4. The background be customized by sanity with the option example below:

    1. Background using color or transparent

    2. If chosen colored

      1. solid color or 2 color

      2. Choose colors based on the defined color

 

Problem statement

Acceptance criteria

Make Secondary CTA Optional

  • In Sanity, in the path, RBI Sanity Studio > Marketing Content > Components > Homepage Component > Hero there should be added a toggle to show/hide the Complementary CTA sub-section

    • The toggle should be named Show Complementary CTA

    • Everything else should be kept the same as today

    • The toggle should be on by default so it doesn’t break existing markets currently using the complementary CTA

  • When the secondary CTA toggle is off, the height of the hero should be reduced/adjusted to eliminate the space occupied by the complementary CTA

  • It should not be a permanent LD flag

 

Hero component on Sanity:

  • Add one flag Show complementary CTA above Complementary CTA field group

  • If the flag is turned on, the Complementary CTA must become required.

Display on Hero component on the site/app:

  • If the flag is turned on AND there is text on the Complementary CTA text field, the button will be displayed on the Hero.

  • If the flag is turned on, BUT there is NO text on the Complementary CTA text field, the button will NOT be displayed on the Hero.

  • If the flag is turned off, BUT there is text on the Complementary CTA text field, the button will NOT be displayed on the Hero.

  • If the flag is turned off, AND there is NO text on the Complementary CTA text field, the button will NOT be displayed on the Hero.

Designs:

Expand the Width of the Primary CTA (One button)

  • On desktop and tablet breakpoints, when the hero layout is side by side, and the secondary CTA toggle is off, the primary CTA should expand horizontally to the entire width of its parent container

  • It should not be a permanent LD flag

Designs:

Resize Hero According to Image Size

  • Images uploaded to Sanity’s Hero Component should fit horizontally the image container of the hero and proportionally resize vertically

    • E.g.

      • If the container is 300 px wide and an image of 1000 x 1000 px is uploaded, the image displayed should be 300 x 300 px

      • If the container is 300 px wide and an image of 600 x 900 px is uploaded, the image displayed should be 300 x 450 px

      • If the container is 300 px wide and an image of 200 x 300 px is uploaded, the image displayed should be 200 x 300 px

  • The hero component should adjust its total height according to the height of the image uploaded

  • It should not be a permanent LD flag

Hero Background Color Options

Context

  • 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

What Needs to Change

  • 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 the Reversed 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 reduced

        • The 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 deprecated

    • The 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 new Background Color toggle defaulting to the on 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:

 

Success metrics

Solution

Background color optional

Scenarios

Note: these are high level scenarios that must pass testing before we can release the feature. They should also be used to drive design. Note that we do not specify user interface details in these steps - that is deliberate, so that we focus on the process and not on the UI, since the UI can change throughout design and development.

Scenario 1: xxx

Steps

Expected results

Steps

Expected results

Do this

Expect that

Design

Figma design here: [insert link]

Development

Release