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.

        Image Added

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

        Image Added

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

  app
  • TASK 1–Create

    • components-library/src/components/hero/hero.tsx

    • We will add tree new attributes:

      • example:

        Code Block
        language typescript
        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 2–Create color constants7—Create color constants (tokens)

    • /wiki/spaces/CA/pages/3361767504

    • path: intl-whitelabel-app/workspaces/frontend/src/styles/constants/primitives.ts

    • Background colors:

      • Burger King:

        • path: intl-whitelabel-app/workspaces/frontend/src/styles/constants/design-tokens.bk.ts

        • Brown (default option)

          • There is already the color: $bbqBrown: 'rgb(80,35,20)'

        • Red

          • There is already the color: $fieryRed: 'rgb(214,35,0)'

        • Green

          • There is already the color: $crunchyGreen: 'rgb(25,135,55)'

        • Orange

          • There is already the color: $flamingOrange: 'rgb(255,135,50)'

        • Yellow

          • There is already the color: $meltyYellow: 'rgb(255,170,0)'

        • To split $mayoEggWhite: 'rgb(245,235,220)'

      • Popeyes:

        • path: intl-whitelabel-app/workspaces/frontend/src/styles/constants/design-tokens.plk.ts

        • Orange (default option)

          • There are already the colors: $popeyesOrange: 'rgb(255,125,0)' and $burntOrange: 'rgb(242,86,0)'

        • Purple

          • There is already the color: $nolaPurple: 'rgb(145,25,135)', but we will create the second purple color: 'rgba(88, 16, 82)'

        • To split $nolaLight: 'rgb(245,241,239)'

      • Firehouse Subs:

        • path: intl-whitelabel-app/workspaces/frontend/src/styles/constants/design-tokens.fhs.ts

        • Red (default option)

          • We will create the color red: 'rgba(196, 0, 0)'

        • Yellow

          • We will create the color red: 'rgba(255, 205, 120)'

        • To split $white: '#fff'

      • 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

      • Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105586&t=DNksX5RjI3ZEfBeU-1 - Connect your Figma account

  • TASK 3—Apply changes to full background8—Create configuration to create hero theme

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

      • Burger King

        • Brown

      • Popeyes

        • Orange

      • Firehouse Subs

        • Red

• TASK

  4—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

  intl-whitelabel-cms

  TASK 5–We will need to add a new toggle named Background Color

  9—Send the theme to hero component

  • path: intl-whitelabel-

    cms

    app/

    schemas

    workspaces/

    components

    frontend/

    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.”

        Image Removed

  • TASK 6–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:

        Image Removed

        • Burger King:

          • Brown (default)

          • Red

          • Green

          • Orange

          • Yellow

        • Popeyes:

          • Orange (default)

          • Purple

        • Firehouse Subs:

          • Red (default)

          • Yellow

  • TASK 7–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

          Image Removed

  • TASK 8—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

  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
    language typescript
    <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

• Full-Color Background:

  • 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

  • Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105586&t=DNksX5RjI3ZEfBeU-1 - Connect your Figma account

• Split Background:

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

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

  • Firehouse Subs: https://www.figma.com/file/99e6no9JN7fxiFdjWHRXC7/Firehouse-Subs?node-id=208%3A105587&t=DNksX5RjI3ZEfBeU-1 - Connect your Figma account