Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

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 Secondary CTA

    • The current sub-section Complementary CTA should be renamed to Secondary CTA Configuration

    • 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 secondary CTA

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

  • It should not be a permanent LD flag

Designs:

Expand the Width of the Primary CTA

  • 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

  • The Reversed toggle should be renamed to 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 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

    • 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

  • It should not be a permanent LD flag

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

Do this

Expect that

Design

Figma design here: [insert link]

Development

Release

  • No labels