[Full color] - Background color optional

Owned by de Sousa Santos, Rodrigo
Last updated: May 16, 2023
3 min read

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–Create 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

          • title:Background Color

          • name: backgroundColor

          • description: Turn this on to add and choose a background color for the homepage Hero.

    • TASK 2–Create dropdown colors

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

            • BBQ Brown (default) - value: brown

            • Fiery Red - value: red

            • Crunchy Green - value: green

            • Flaming Orange - value: orange

            • Melty Yellow - value: yellow

          • Popeyes:

            • Orange (default) - value: orange

            • Purple - value: purple

          • Firehouse Subs:

            • House Red (default) - value: red

            • House Yellow - value: yellow

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

    • TASK 3—Deprecate Reversed toggle

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

        • The Reversed toggle should be deprecated

  • ctg-component-library

    • TASK 4—Change component hero

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

      • We will add tree new attributes:

        • example:

          background?: string;

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

        • full background

        • texts and buttons with the same color

        • texts and buttons with different colors

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

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

    • Use the feature flag here.

    • 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

Useful Links