Versions Compared

Old Version 10

changes.mady.by.user de Sousa Santos, Rodrigo

Saved on

compared with

New Version Current

changes.mady.by.user de Sousa Santos, Rodrigo

Saved on

Key

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

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

...

TASK 1–Create feature flag

TASK 2–Create color constants

...

Background colors:

  • Burger King:

    • White (default option)

    • Brown

    • Red

    • Green

    • Orange

    • Yellow

  • Popeyes:

    • Gray (default option)

    • Orange

    • Purple

  • Firehouse Subs:

    • White (default option)

    • Red

    • Yellow

...

Burger King: https://www.figma.com/file/RtD0UFtwuwXx14lbLCAPlr/Burger-King?node-id=2818%3A74806&t=6vGuil8CU4c3vOzP-1 - Connect your Figma account

...

Popeyes: https://www.figma.com/file/sfH3mHXoEUfHbm5qMul0Vn/Popeyes?node-id=1782%3A68295&t=zNRPSr8NnlQB10C0-1 - Connect your Figma account

...

.

...

  • intl-whitelabel-cms

    • TASK 1–We will need to add a 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

          The description of the toggle should be updated to “Turn

          • title:Background Color

          • name: backgroundColor

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

          Image Modified

    • TASK 2–We will need to create a dropdown2–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:

            • White

            • Brown

            • Red

            • Green

            • Orange

            • YellowBBQ Brown (default) - value: brown

            • Fiery Red - value: red

            • Crunchy Green - value: green

            • Flaming Orange - value: orange

            • Melty Yellow - value: yellow

          • Popeyes:

            • Gray

            • OrangeOrange (default) - value: orange

            • Purple - value: purple

          • Firehouse Subs:

            • White

            • Red

            • Yellow

      TASK 3–We will need to add a toggle named Split Background

            • 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 need to add a 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

          Image Removed

      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

        will add tree new attributes:

        • example:

          Code Block
          languagetypescript
          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 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 configuration to create hero theme

      • 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 (create method to validate it):

        • Burger King

          • Brown

        • Popeyes

          • Orange

        • Firehouse Subs

          • Red

  • 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

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

Screenshots

  • N/D

POC

  • N/D

Impact Analysis

  • Hero component

Dependencies

  • N/D

Unit Test

  • N/D