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

        • OBS: the values should be the color names in lowercase, if possible.

    • 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

  • ctg-component-library

    • TASK 5—Change component hero

      • path: ctg-components-library/src/components/hero/hero.tsx

      • We will add tree new attributes: 

        backgroundHero?: string;
isSplit?: boolean;
backgroundSplit?: string;

      • After that, we will update the component to support the themes

        • full background

        • split background

        • texts and buttons with the same color

        • texts and buttons with different colors

      • 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

      • 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

  • intl-whitelabel-app

    • TASK 5—Change graphql queries and run apollo generate

      • path: intl-whitelabel-app/workspaces/frontend/src/queries/sanity/fragments/hero.graphql

    • TASK 6–Create feature flag

    • TASK 7–Create color constants (tokens)

    • TASK 8—Create method to create hero theme

      • Should be a method or a configuration to know what color or theme we will use by hero component.

      • Burger King:

        • Brown (default option)

        • Red

        • Green

        • Orange

        • Yellow

      • Popeyes:

        • Orange (default option)

        • Purple

      • Firehouse Subs:

        • Red (default option)

        • 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—Send the theme on hero component

      • path: intl-whitelabel-app/workspaces/frontend/src/components/features/components/hero/hero-container.tsx

      • Update the ctg-component-library version

      • Use the method created to generate the theme by Brand and add on hero component

        <Hero
  ...
  backgroundHero={backgroundHero}
  isSplit={true}
  backgroundSplit={backgroundSplit}
/>

Screenshots

  • N/D

POC

  • N/D

Impact Analysis

  • Hero component

Dependencies

  • N/D

Unit Test

  • N/D

  • No labels