Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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:

...