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 17 Next »

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-cms

    • TASK 1–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 2–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 3–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 4—Deprecate Reversed toggle

      • path: intl-whitelabel-cms/schemas/components/documents/hero.tsx

        • The Reversed toggle should be deprecated

        • The Reversed toggle option should be removed from Sanity’s UI

  • intl-whitelabel-app

    • TASK 5—Create graphql queries and run apollo generate

    • TASK 6–Create feature flag

    • TASK 7–Create color constants (tokens)

    • TASK 8—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 new Background Color toggle defaulting to the on state in the respective colors:

        • Burger King

          • Brown

        • Popeyes

          • Orange

        • Firehouse Subs

          • Red

    • TASK 9—Apply changes to Split Background

      • 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

Screenshots

  • N/D

POC

  • N/D

Impact Analysis

  • Hero component

Dependencies

  • N/D

Unit Test

  • N/D

  • No labels